<template>
    <div>
        <!-- 按钮 -->
        <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
            @click="refreshList"></el-button>
        <el-button type="primary" icon="el-icon-plus" style="margin:10px" @click="addShow1">添加商品分类</el-button>


        <!-- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"  -->

        <el-table row-key="id" border default-expand-all="false" :data="treeData"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">



            <el-table-column prop="id" label="id" align="center">
            </el-table-column>
            <el-table-column prop="name" label="分类名称" align="center">
            </el-table-column>
            <el-table-column prop="intro" label="类别介绍" align="center">
            </el-table-column>
            <el-table-column prop="commissionPercentage" label="抽佣" align="center">
            </el-table-column>
            <el-table-column prop="receivableDeposit" label="押金" align="center">
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="{ row, $index }">
                    <el-tooltip content="新增" v-if="row.children" placement="top">
                        <el-button type="primary" size="mini" icon="el-icon-plus" @click="addShow(row)"
                            style="margin-right: 10px;"></el-button>
                    </el-tooltip>
                    <el-tooltip content="修改" placement="top">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="editShow(row)"
                            style="margin-right: 10px;"></el-button>
                    </el-tooltip>

                    <el-popconfirm title="是否删除？" icon="el-icon-info" icon-color="red" @confirm="handleDelete(row)">
                        <el-tooltip content="删除" placement="top" slot="reference">
                            <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                        </el-tooltip>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 对话框  -->
        <el-dialog title="添加" :visible.sync="dialogVisible1">
            <el-form style="width:80%" :model="form1" ref="ruleForm1">

                <el-form-item label="父类别" label-width="100px" prop="name">
                    <el-input autocomplete="off" v-model="form1.pid"></el-input>
                </el-form-item>
                <el-form-item label="类别名称" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="form1.name"></el-input>
                </el-form-item>
                <el-form-item label="类别描述" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="form1.intro"></el-input>
                </el-form-item>
                <el-form-item label="抽佣" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="form1.commissionPercentage"></el-input>
                </el-form-item>
                <el-form-item label="保证金" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="form1.receivableDeposit"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit1">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 对话框  -->
        <el-dialog :title="isEdit ? '修改' : '添加'" :visible.sync="dialogVisible">
            <el-form style="width:80%" :model="form" :rules="rules" ref="ruleForm">
                <el-form-item v-if="form.pname" label="上级分类" label-width="100px" prop="pname">
                    <span>{{ form.pname }}</span>
                </el-form-item>
                <el-form-item label="类别名称" label-width="100px" prop="name">
                    <el-input autocomplete="off" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="类别介绍" label-width="100px" prop="intro">
                    <el-input autocomplete="off" v-model="form.intro"></el-input>
                </el-form-item>

                <el-form-item label="抽佣" v-if='form.pid' label-width="100px" prop="commissionPercentage">
                    <el-input autocomplete="off" v-model="form.commissionPercentage"></el-input>
                </el-form-item>
                <el-form-item label="保证金" v-if='form.pid' label-width="100px" prop="receivableDeposit">
                    <el-input autocomplete="off" v-model="form.receivableDeposit"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="del()">取 消</el-button>
                <el-button type="primary" @click="addSubmit(isEdit)">确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>

<script>
import { number } from 'echarts';
export default {
    name: 'productCategory',
    props: {
        shopClassificationId: Number

    },

    data() {
        return {
            // 表单验证
            rules: {
                name: [{
                    required: true,
                    message: '请输入商品名',
                    trigger: 'blur'
                }],
            },
            // 添加店铺信息
            form1: {
                commissionPercentage: '',   //平台抽佣比例
                pid: this.shopClassificationId,        //父类别
                intro: '',                  //列别介绍
                name: '',                   //类别名称
                receivableDeposit: ''       //应收押金金额
            },
            //添加商品信息
            form: {
                id: '',
                pid: 0,
                intro: '',
                name: '',
                shopClassificationId: ''
            },
            dialogVisible1: false,
            dialogVisible: false,
            //列表数据
            list: [],
            list1: [],//商品数据
            treeData: [],
            treeMap: {},
            //搜索
            searchText: '',
            isEdit: false
        }
    },
    watch: {
        shopClassificationId: {
            immediate: true,
            async handler(val) {
                this.fetchSecondData()
            }
        },
        dialogVisible1: {
            handler() {
                if (!this.dialogVisible1) {
                    this.form = {
                        id: '',
                        pid: 0,
                        intro: '',
                        name: '',
                        shopClassificationId: ''
                    }
                } else {
                    console.log('dialogVisible1', this.form1);
                }
            }
        },
        dialogVisible: {
            handler() {
                if (!this.dialogVisible) {
                    this.form = {
                        id: '',
                        pid: 0,
                        intro: '',
                        name: '',
                        shopClassificationId: ''
                    }

                } else {
                    console.log(this.form, 'dialogVisible');
                }
            }
        }

    },
    created() {
        // this.fetchSecondData()
        // this.getInitList()
    },
    methods: {
        del() {
            this.form.receivableDeposit = ''
            this.dialogVisible = false

        },
        async getpoducts(ev) {
            console.log(ev, 'ev');
            this.list1 = await this.$API.shopsort.getShopsort(ev)
        },
        // 添加（商品）还是修改（商品、店铺）
        async addSubmit(isEdit) {
            // 判断添加还是修改
            if (!isEdit) {
                this.$refs.ruleForm.validate(async (valid) => {
                    if (valid) {
                        let res1
                        if (!this.form.id) {
                            delete this.form.id
                            // console.log(this.form, 'this.form');
                            res1 = await this.$API.shopsort.addShopsort(this.form);
                            if (res1) {
                                this.fetchSecondData()
                            }
                        }
                        else {
                            // 修改商品信息
                            console.log(this.form, 'this.form,修改');
                            // res1 = await this.$API.shopsort.editShopsort(this.form);
                            // console.log(res1, "=========================")
                        }
                        this.$message.success(`${this.form.id ? '修改' : '添加'}成功`)
                        // 更新商品

                        // this.list1 = await this.$API.shopsort.getShopsort(this.form.shopClassificationId)

                        console.log(this.list1, 'list1567');
                        this.dialogVisible = false;
                        this.form = {
                            init: true,
                            id: '',
                            pid: 0,
                            intro: '',
                            name: '',
                            shopClassificationId: ''
                        }
                    }
                })
            } else {
                //判断修改的是店铺还是商品
                if (this.form.receivableDeposit) {  //判断有无保证金
                    let updateShopClassification = await this.$API.shopsort.updateShopClassification({
                        commissionPercentage: this.form.commissionPercentage,
                        id: this.form.id,
                        intro: this.form.intro,
                        name: this.form.name,
                        pid: this.form.pid,
                        receivableDeposit: Number(this.form.receivableDeposit)
                    })
                    updateShopClassification ? this.refreshList() : this.refreshList()
                } else {
                    // 商品


                    // console.log(this.form, '判断信息');
                    let res1 = await this.$API.shopsort.editShopsort(this.form);
                    // console.log(res1, '结果信息');
                    this.dialogVisible = false;
                    res1 ? this.refreshList() : this.refreshList()
                }

            }

        },
        addShow1(row) {
            // console.log(123);
            this.dialogVisible1 = true
        },

        // 添加店铺功能
        async addSubmit1() {
            this.dialogVisible1 = true
            const valid = await this.$refs.ruleForm1.validate(async (valid) => {
                this.form1.pid = Number(this.form1.pid)
                this.form1.receivableDeposit = Number(this.form1.receivableDeposit)
                this.form1.commissionPercentage = Number(this.form1.commissionPercentage)
                if (this.form1.pid) {
                    let res3 = await this.$API.shopsort.addShopClassification(this.form1);
                    this.dialogVisible1 = false

                    if (!this.dialogVisible) {
                        this.refreshList()    // 更新dom
                    }
                }
            })
        },

        addShow(row) {
            this.isEdit = false
            this.form.shopClassificationId = row.id
            this.dialogVisible = true
        },
        editShow(row) {
            console.log(row, 'row1234567');
            this.isEdit = true
            // console.log(row, 'row', this.form);
            this.form = JSON.parse(JSON.stringify({ ...this.form, ...row }))

            this.dialogVisible = true
        },
        // 刷新功能
        refreshList() {
            this.fetchSecondData()
        },
        async fetchSecondData() {
            this.treeData = []
            // 获取店铺
            const data = await this.$API.shopsort.getproductCategory({
                id: this.shopClassificationId,
                pageNumber: 1,
                pageSize: 20
            })
            //获取商品
            data.data.rows[0].childResponseList.map(async node => {
                const { data } = await this.$API.shopsort.getShopsort(node.id)
                this.treeData.push(
                    {
                        ...node,
                        children: data
                    }
                )
            })
        },
        // 判断删除的店铺与商品
        async handleDelete(row) {
            if (row.pid) {
                await this.$API.shopsort.deleteShopClassification({
                    id: row.id
                })
            } else {
                console.log(row, 'sc');
                await this.$API.shopsort.delShopsort({ id: row.id })
            }
            this.$message.success('删除成功')
            this.fetchSecondData()
        }
    }
}
</script>

<style scoped lang="scss"></style>